.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.chart-tag-list {
  .ghost {
    opacity: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
  background: #f00;
  width: 20px;
  display: block;
}

.list-group-item {
  cursor: move;
}

.list-group-item i {
  cursor: pointer;
}

.page-main-body {
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 28px;
  left: 0;
  right: 10px;
  display: flex;
  > div {
    flex: 1 0 auto;
    max-height: 100%;
    overflow-y: auto;
  }
  .page-main-left {
    background: #fff;
    border: 1px solid #eee;
    height: 100%;
    padding: 0;
    margin-right: 10px;
    .el-menu--horizontal > .el-menu-item {
      height: 40px;
      line-height: 40px;
    }
    .left-menu {
      padding: 10px;
      font-size: 12px;
      line-height: 200%;
      h3 {
        padding: 0;
        margin: 10px 0;
        font-size: 13px;
        a {
          display: none;
          float: right;
        }
        &:hover {
          a {
            display: block;
          }
        }
      }
      ul {
        min-height: 50px;
      }
      li {
        padding: 2px 7px;
        cursor: pointer;
        &:hover {
          background: #f5f5f5;
        }
      }
      i.pull-right {
        cursor: pointer;
        line-height: 28px;
      }
      .el-tree-node__label {
        font-size: 12px;
      }
    }
  }
  .page-main-left2 {
    width: 240px;
    margin-right: 10px;
    .el-card {
      margin-bottom: 10px;
    }
    .el-card__body {
      padding: 10px;
      min-height: 150px;
    }
    h4 {
      padding-bottom: 10px;
      margin: 0;
    }
    .chart-tag-list {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-content: space-between;
      flex-wrap: wrap;
      .el-tag {
        position: relative;
        width: 105px;
        text-align: center;
        cursor: pointer;
        margin: 5px 0;
      }
    }
    .tag-tip-list {
      padding-top: 20px;

      > .el-tag {
        display: block;
        width: 100%;
        overflow: hidden;
        text-align: left;
        position: relative;
        .el-icon-close {
          position: absolute;
          right: 5px;
          top: 3px;
        }
        .pull-right {
          margin-right: 20px;
        }
        .ghost {
          display: none;
        }
      }
      .el-tag + .el-tag {
        margin-left: 0;
        margin-top: 10px;
      }
      :first-child {
        white-space: nowrap;
      }
    }
  }
  .page-main-right {
    display: flex;
    flex-direction: column;

    .el-tabs__item {
      padding: 0 10px;
    }
    .el-select {
      width: 100%;
    }

    .chart-body {
      display: flex;
      flex: 1 1 auto;
      height: 100%;
      flex-direction: column;
      background: #fff;
      padding-bottom: 28px;
    }
  }

  .chart-tag-axis {
    > div {
      position: relative;
      > label {
        position: absolute;
        left: 10px;
        top: 10px;

      }
    }
    div.axis-list {
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 10px 0 30px;
      margin: 5px 0;
      border: 1px solid #eee;
      height: 40px;
      line-height: 40px;
      > span.el-tag {
        cursor: pointer;
        margin-left: 10px;
      }
    }
    .ghost {
      text-indent: -10000px;
    }
  }
}

.menu-series > * {
  display: flex;
  justify-content: space-between;
  padding:0;
  margin:0;
}
